<template>
	<view >
		<view class="option-pay card">
			<view class="title">支付方式</view>
			 <radio-group @change="radioChange">
				 <!-- #ifndef MP-WEIXIN -->
				 <!-- 支付宝支付选项（非微信小程序平台显示） -->
				 <label class="pay-item center space-between" >
				 	<view class="left center">
				 		<image src="/static/pay/alipay.png"></image>
				 		<text>支付宝</text>
				 	</view>
				 	<radio value="alipay" :checked="provider === 'alipay'"  style="transform:scale(0.8)"/>
				 </label>
				 <!-- #endif -->

				 <!-- #ifndef MP-ALIPAY -->
				 <!-- 微信支付选项（非支付宝小程序平台显示） -->
				<label class="pay-item center space-between" >
					<view class="left center">
						<image src="/static/pay/wxpay.png"></image>
						<text>微信支付</text>
					</view>
					<radio value="wxpay" :checked="provider === 'wxpay'" style="transform:scale(0.8)"/>
				</label>
				<!-- #endif -->
			</radio-group>
		</view>

		<!-- 实付金额显示区域 -->
		<view class="card price space-between">
			<text>实付金额</text>
			<text>￥{{data.price}}</text>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 微信小程序平台的支付按钮 -->
		<button class="btn" :loading="loading":disabled="loading"  @click="wxPayHandler">立即支付</button>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- 非微信小程序平台的支付按钮 -->
		<button class="btn" :loading="loading" :disabled="loading" @click="payHandler">立即支付</button>
		<!-- #endif -->

	</view>
</template>

<script>
	import payMixin from './mixins/pay.js'

	export default {
		// 使用支付混入
		mixins: [payMixin],

		data() {
			return {
				data: { 
					price: 0,      // 支付金额
					orderId: null, // 订单id
				}
			}
		},

		onLoad(option) {
			if(option.params) this.data = JSON.parse(option.params)
		},

		methods: {
			// 如果无自定义方法，使用混入中的方法
		}
	}
</script>

<style lang="scss">
	// 卡片样式
	.card {
		margin: 0 30rpx;           // 左右外边距
		padding: 0 20rpx;          // 左右内边距
		background-color: #FFFFFF; // 背景色
		margin-top: 30rpx;         // 上外边距
		box-shadow: 1px 0 5px 0 rgba(0,0,0, 0.08); // 阴影效果
		border-radius: 20rpx;      // 圆角
	}

	// 支付方式区域样式
	.option-pay {
		.title {
			line-height: 90rpx;     // 行高
			border-bottom: $mxg-underline; // 底部边框
		}

		.pay-item {
			line-height: 90rpx;     // 行高
			.left {
				image {
					width: 60rpx;    // 宽度
					height: 60rpx;   // 高度
				}
				text{
					font-size: 33rpx;   // 字体大小
					padding-left: 20rpx; // 左内边距
				}
			}

		}
	}

	// 价格显示样式
	.price {
		line-height: 90rpx;        // 行高
		font-size: 30rpx;          // 字体大小
		text:last-child {
			color: $mxg-text-color-red; // 最后一个文本为红色
		}
	}

	// 支付按钮样式
	.btn {
		margin: 60rpx 30rpx;       // 外边距
		background-color: $mxg-color-primary; // 背景色
		color: #FFFFFF;            // 文字颜色
		border-radius: 50rpx;      // 圆角
		line-height: 80rpx;        // 行高
		font-size: 30rpx;          // 字体大小
		&::after {
			// 加载中隐藏边框
			border: none;
		}
	}
</style>
